<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{static/dist/css/zui.min.css}">
    <!--    <引入jquery-->
    <script th:src="@{static/dist/lib/jquery/jquery.js}"></script>
    <!--    引入样式-->
    <script th:src="@{static/dist/js/zui.min.js}"></script>
</head>

<body>
<!-- 对话框HTML 员工修改的模态框-->
<div class="modal fade" id="empUpdateModel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_update_static" class="col-sm-2">empName</label>
                        <div class="col-md-6 col-sm-10">
                            <p type="text" name="empName" class="form-control-static" id="empName_update_static" placeholder="empName"></p>
                            <div class="help-block"></div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_update_input" class="col-sm-2">email</label>
                        <div class="col-md-6 col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@999.com">
                            <div class="help-block"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2">gender</label>
                        <div class="col-md-6 col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" id="gender1_update_input" name="gender" value="M" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" id="gender2_update_input" name="gender" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dept_update_select" class="col-sm-2">deptName</label>
                        <div class="col-sm-3">
                            <!--部门提交部门id即可-->
                            <select class="form-control" name="dId" id="dept_update_select">

                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>

        </div>
    </div>
</div>



<!-- 对话框HTML 员工添加的模态框-->
<div class="modal fade" id="empAddModel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2">empName</label>
                        <div class="col-md-6 col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                            <div class="help-block"></div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_add_input" class="col-sm-2">email</label>
                        <div class="col-md-6 col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@999.com">
                            <div class="help-block"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2">gender</label>
                        <div class="col-md-6 col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" id="gender1_add_input" name="gender" value="M" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" id="gender2_add_input" name="gender" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dept_add_select" class="col-sm-2">deptName</label>
                        <div class="col-sm-3">
                            <!--部门提交部门id即可-->
                            <select class="form-control" name="dId" id="dept_add_select">

                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>

        </div>
    </div>
</div>

<!--搭建页面-->
<div class="container">
    <!--标题行-->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM_CRUD</h1>
        </div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_model_btn">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
    <!--显示表格数据-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check_all">
                        </th>
                        <th>id</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody >



                </tbody>

            </table>
        </div>
    </div>
    <!--显示分页信息-->
    <div class="row">
        <!--显示文字信息-->
        <div class="col-md-6" id="page_info_area">

        </div>
        <!--分页条信息-->
        <div class="col-md-6" id="page_nav_area">
        </div>
    </div>
</div>

<script type="text/javascript">

    /*全局变量*/
    var totalRecord;//总页数
    var currentPage;//当前页
    /*1.页面加载完成以后，直接发送一个ajax请求，要到分页数据*/
    $(function () {
        //去首页
        to_page(1)
    });

    function to_page(pn){
        $.ajax({
            url: "emps",
            data: "pn="+pn,
            type: "GET",
            success: function (result) {
                // console.log(result);
                //    1.解析并显示员工数据
                build_emps_table(result);
                //    2.解析并显示分页信息
                build_page_info(result);
                //3.解析并显示分页条信息
                build_page_nav(result);
            }
        });
    }

    //    1.解析并显示员工数据
    function build_emps_table(result) {
        //清空表格 否则会显示上一页的数据
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            var checkBok=$("<td><input type='checkbox' class='check_item'></td>")
            var empIdTd= $("<td></td>").append(item.empId);
            var  empNameTd=$("<td></td>").append(item.empName);
            var  genderTd=$("<td></td>").append(item.gender=='M'? "男":"女");
            var  emailTd=$("<td></td>").append(item.email);
            var  deptName=$("<td></td>").append(item.dept.deptName);

            var editBtn=$("<button></button>").addClass("btn btn-primary edit_btn")
                    .append($("<span></span>").addClass("icon icon-edit")).append("编辑");
            //为编辑按钮添加一个自定义的属性，来表示当前员工的id
            editBtn.attr("edit-id",item.empId);

            var delBtn=$("<button></button>").addClass("btn btn-danger delete_btn")
                    .append($("<span></span>").addClass("icon icon-remove-sign")).append("删除");
            //为删除按钮添加一个自定义的属性，来表示删除当前员工的id
            delBtn.attr("del-id",item.empId);

            var btnTd=$("<td></td>").append(editBtn).append(" ").append(delBtn);
            //append方法返回的是append
            $("<tr></tr>").
            append(checkBok).
            append(empIdTd).
            append(empNameTd)
                .append(genderTd).append(emailTd).append(deptName)
                .append(btnTd)
                .appendTo("#emps_table tbody");
        });

    }
    // 2.解析并显示分页信息
    function build_page_info(result){
        $("#page_info_area").empty()
        $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总" +
            result.extend.pageInfo.pages+"页,总" +result.extend.pageInfo.total+
            "条记录数");
        //总页数
        totalRecord=result.extend.pageInfo.pages
        //当前页数
        currentPage=result.extend.pageInfo.pageNum
    }

    //    2.解析并显示分页条信息
    function build_page_nav(result) {
    //page_nav_area
        $("#page_nav_area").empty();
        var ul=$("<ul></ul>").addClass("pager");

        var firstPageLi=$("<li></li>").append($("<a></a>").append("首页"));
        //构建翻页元素
        var prePageLi=$("<li></li>").append($("<a></a>").append("«"));
        if (result.extend.pageInfo.hasPreviousPage==false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }
        //为元素添加点击翻页事件
        firstPageLi.click(function (){
            to_page(1);
        });
        prePageLi.click(function (){
           to_page(result.extend.pageInfo.pageNum-1);
        });

        var nextPageLi=$("<li></li>").append($("<a></a>").append("»"));

        var lastPageLi=$("<li></li>").append($("<a></a>").append("尾页"));

        if (result.extend.pageInfo.hasNextPage==false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }

        nextPageLi.click(function (){
            to_page(result.extend.pageInfo.pageNum+1);
        });
        lastPageLi.click(function (){
            to_page(result.extend.pageInfo.pages);
        });


        //添加首页和前一页的提示
        ul.append(firstPageLi).append(prePageLi);

        $.each(result.extend.pageInfo.navigatepageNums,function (index,item){
            var numLi=$("<li></li>").append($("<a></a>").append(item).attr("th:href","#"));
            if (result.extend.pageInfo.pageNum==item){
                numLi.addClass("active")
            }
            numLi.click(function (){
                to_page(item)
            });

           ul.append(numLi);
        });
        //添加末页和后一页的提示
        ul.append(nextPageLi).append(lastPageLi);

        ul.appendTo(page_nav_area);

    }
    //清空表单样式及内容
    function reset_from(ele){
        $(ele)[0].reset();
    //    清空表单样式
        $(ele).find("*").removeClass("has-success has-error");
        $(ele).find(".help-block").text("")
    }

    //点击新增按钮
    $("#emp_add_model_btn").click(function (){
        //清除表单数据 （表单重置）全部重置
        reset_from("#empAddModel form")
        //发送ajax请求，查出不部门的信息，显示下拉列表
        getDepts("#dept_add_select");

        //弹出模态框
        $("#empAddModel").modal({
            backdrop:"static"
        })
    });

    //查出所有的部门信息并显示在下拉列表中
    function getDepts(ele){
        //清空之前下拉列表的值
        $(ele).empty();
        $.ajax({
            url:"depts",
            type: "GET",
            success:function (result){
                // console.log(result)
            //    {"code":100,"msg":"处理成功","extend":{"depts":[{"deptId":1,"deptName":"测试部"},{"deptId":2,"deptName":"开发部"}]}}
            //    显示部门信息在下拉列表中
            //     $("#dept_add_select").append()
            $.each(result.extend.depts,function (){
                var optionEle=$("<option></option>").append(this.deptName).attr("value",this.deptId);
                optionEle.appendTo(ele)
            })
            }
        });
    }
    //检验表单数据
    function validate_add_form(){
    //    1.拿过来要检验数据，使用正则表达式
        var empName = $("#empName_add_input").val();
        var regName =/(^[a-zA_Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
    //  校验名字
        if (!regName.test(empName)) {
            // alert("用户名可以2-5位中文6-16英文和数字的组合")
            //应该清空这个元素之前的格式
            show_validate_msg("#empName_add_input","error","用户名可以2-5位中文6-16英文和数字的组合");
            return false;
        }else {
            show_validate_msg("#empName_add_input","success","");
        }
    //  校验邮箱
        var email =$("#email_add_input").val();
        var regEmail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!regEmail.test(email)){
            // alert("邮箱格式不正确")
            show_validate_msg("#email_add_input","error","邮箱格式不正确");
            return false;
        }else {
            show_validate_msg("#email_add_input","success","");

        }
        return true;
    }

    //显示校验结果的提示信息
    function show_validate_msg(ele,status,msg){
        //应该清空这个元素之前的格式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("div").text("");
        if ("success"==status){
            $(ele).parent().addClass("has-success");
            $(ele).next("div").text("");
        }else if ("error"==status){
            $(ele).parent().addClass("has-error");
            $(ele).next("div").text(msg);
        }
    }

    $("#empName_add_input").change(function (){
    //    发送ajax请求校验用户名是否可用
        var empName=this.value;
        $.ajax({
            url:"checkemp",
            data:"empName="+empName,
            type:"POST",
            success:function (result){
                if (result.code==100){
                    show_validate_msg("#empName_add_input","success","用户名可用");
                    //给按钮添加自定义属性，用于校验数据是否合法能保存
                    $("#emp_save_btn").attr("ajax-va","success")
                }else {
                    show_validate_msg("#empName_add_input","error",result.extend.va_msg);
                    $("#emp_save_btn").attr("ajax-va","error")
                }
            }

        });

    });

    //点击保存，保存员工
    $("#emp_save_btn").click(function (){
    //    1.模态框中填写的表单数据提交给服务器进行保存
    //    1.1 先对要提交给服务器的数据进行校验
        if (!validate_add_form()){
            return false;
        }
    //    1.2判断ajax用户名校验是否成功了成功才添加
        if ($(this).attr("ajax-va")=="error"){
            return false;
        }
    //    2.发送ajax请求保存员工
        empAddModel
        $.ajax({
            url:"emp",
            type:"POST",
            data:$("#empAddModel form").serialize(),
            success:function (result){
                // alert(result.msg)
                if (result.code==200){
                //显示失败信息
                //有哪个字段的错误信息就显示哪个字段的
                    if (undefined!=result.extend.errorFields.email){
                        //显示邮箱错误信息
                        show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
                    }

                    if (undefined!=result.extend.errorFields.empName){
                        //显示员工错误信息
                        show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);

                    }

                }else {
                    //    员工保存成功：
                    //    1.关闭模拟框
                    $("#empAddModel").modal('hide');
                    //    2.来到最后一页，显示刚才保存的数据
                    //    显示最后一页数据
                    to_page(totalRecord);
                }


            }
        });
    });


    //1.我们是按钮创建之前就绑定了click，所以绑不上
    // 1）可以在创建按钮的时候绑定
    // 2）绑定点击    .live jQuery给所有匹配的元素附加一个事件，即使是以后添加的元素再添加进来也是有效的
    //jQuery新版没有live，是用on方法替代
    $(document).on("click",".edit_btn",function (){
        // alert("edit")
    //    0查出员工信息，并显示员工信息
        getEmp($(this).attr("edit-id"));
    //    1.查出部门信息，并显示部门列表
        getDepts("#dept_update_select");
    //    2 弹出模态框查出
    //    3.把员工的id传递给模态框的更新按钮
        $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
        $("#empUpdateModel").modal({
            backdrop:"static"
        })


    });
    //绑定点击删除事件 单个删除
    $(document).on("click",".delete_btn",function (){
    //    1.弹出是否确认删除对话
        var empName= $(this).parents("tr").find("td:eq(2)").text();
        var empId = $(this).attr("del-id");
        if (confirm("确认删除【"+empName+"】吗？")){
        //    点击确认，发送ajax请求删除即可
            $.ajax({
                url:"emp/"+empId,
                type:"DELETE",
                success:function (resulet){
                    alert(resulet.msg);
                    to_page(currentPage);
                }
            });
        }

    });

    //获取指定id的员工
    function getEmp(id){
        $.ajax({
            url:"emp/"+id,
            type:"GET",
            success:function (result){
                // console.log(result)
                var empData=result.extend.emp;
                $("#empName_update_static").text(empData.empName);
                $("#email_update_input").val(empData.email);
                $("#empUpdateModel input[name=gender]").val([empData.gender]);
                $("#empUpdateModel select").val([empData.dId])
            }
        });
    }

//    点击更新，更新员工信息
    $("#emp_update_btn").click(function (){
    //    验证邮箱是否合法
        //  校验邮箱
        var email =$("#email_update_input").val();
        var regEmail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!regEmail.test(email)){
            // alert("邮箱格式不正确")
            show_validate_msg("#email_update_input","error","邮箱格式不正确");
            return false;
        }else {
            show_validate_msg("#email_update_input","success","");

        }

    //  2.发送ajax请求保存更新的员工数据
        $.ajax({
            url:"emp/"+$(this).attr("edit-id"),
            type:"PUT",
            data:$("#empUpdateModel form").serialize(),
            success:function (result){
                // alert(result.msg);
            //    1.关闭对话框
                $("#empUpdateModel").modal("hide");
            //    2.回到本页面
                to_page(currentPage);
            }
        });

    });

//    完成点击全选/全不选功能
        $("#check_all").click(function(){
            //attr获取checked是undefined
            //我们这些dom原生的属性；attr获取自定义属性的值
            // prop修改和读取dom原生的属性
            $(".check_item").prop("checked",$(this).prop("checked"));
        });

//     check_item 当手动全选的时候自动全选也要选中
        $(document).on("click",".check_item",function (){
            //判断当前选中的元素是不是所有元素
            //checked匹配所有选中的被选中的元素
           var  flag=$(".check_item:checked").length==$(".check_item").length

            $("#check_all").prop("checked",flag)
        })

//     点击全部删除,就批量删除
        $("#emp_delete_all_btn").click(function (){
            var empNames="";
            var del_idstr="";
            $.each($(".check_item:checked"),function (){
               // this
                empNames+=$(this).parents("tr").find("td:eq(2)").text()+",";
                del_idstr+=$(this).parents("tr").find("td:eq(1)").text()+"-";
            });
            //取出empNames中多余的逗号
            empNames=empNames.substring(0,empNames.length-1)
            del_idstr=del_idstr.substring(0,del_idstr.length-1)
            if (confirm("确认删除【"+empNames+"】吗？")){
            //    发送ajax请求删除
                $.ajax({
                    url:"emp/"+del_idstr,
                    type:"DELETE",
                    success:function (result){
                        alert(result.msg);
                        //回到当前页面
                        to_page(currentPage)
                        $("#check_all").prop("checked",false)
                    }
                });
            }
        });
</script>

</body>

</html>